<template>
    <div>
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="90px" class="demo-ruleForm"
            status-icon>
            <el-form-item label="类目名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入类目名称" />
            </el-form-item>
            <el-form-item label="类目图片" prop="img">
                <el-input v-model="formData.img" />
                <Tuku v-model="formData.img"></Tuku>
            </el-form-item>
            <el-form-item label="类目排序" prop="seq">
                <!-- <el-input v-model="formData.seq" placeholder="请输入类目名称" /> -->
                <el-input-number v-model="formData.seq" :min="1" :max="10" />
            </el-form-item>
            <el-form-item label="父目录ID" prop="parentId">
                <!-- <el-input v-model="formData.parentId" placeholder="请输入类目" /> -->
                <el-tree-select v-model="formData.parentId" :data="categorydata" check-strictly :render-after-expand="false"
                    style="width: 240px" />
            </el-form-item>
            <el-form-item label="添加人" prop="lastUpdateBy">
                <el-input v-model="formData.lastUpdateBy" placeholder="请输入添加人" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import Tuku from '@/components/tuku/Tuku.vue'
import { onMounted } from 'vue'
import { ref, reactive } from 'vue'
import { CategoryApi } from '@/api'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const ruleFormRef = ref()
const formData = reactive({
    id: '',
    name:'',
    seq: '',
    img: '',
    parentId: 0,
    lastUpdateBy:''
})
const rules = reactive({
    name: [
        { required: true, message: '请输入类目的名称，3到5个字符', trigger: 'blur' },
        { min: 2, max: 5, message: '请输入3 to 5字符', trigger: 'blur' },
    ],
})
// 类目选择
const categorydata= ref([
    {
        value: 0,
        label: '一级目录',
    },
])

onMounted(()=>{
CallCategoryApi()
})
const CallCategoryApi = () => { 
    CategoryApi.select.call().then((res: any) => {
        
        res.forEach((item:any )=> {
            item.value = item.id
            item.label = item.name

        });
        console.log(res);
       const categoryData2 = res.reduce((hezhi: any, currentValue: any) => {
            currentValue.children = res.filter((item: any) => {
                return item.parentId === currentValue.id
            })
            // console.log(currentValue);
            
            if(currentValue.parentId === 0){
                hezhi.push(currentValue)
            }
           return hezhi;
        },[])
        console.log(categoryData2);
        categorydata.value = categoryData2
})
}

const formSubmit=()=>{
    CategoryApi.insert.call({
        name:formData.name,
        seq:formData.seq,
        img:formData.img,
        parentId:formData.parentId,
        lastUpdateBy:formData.lastUpdateBy
    }).then((res:any)=>{
        console.log(res);
        ElMessage.success('添加成功')
        //添加成功跳转页面
        router.push({ name: 'category-list' })
        //直接刷新数据
        CallCategoryApi()
    })
}

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid:any, fields:any) => {
        if (valid) {
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>

</style>